<template>
  <div class="CountService">
    <div class="ele-title">
      <h4 v-if="doctorid!==null">服务统计</h4>
      <h4 v-else-if="cityid!==null" />
    </div>
    <div class="ele-con-res " :class="doctorid!==null?'flex':''">
      <div v-if="doctorid!==null" class="flex" style="width: 100%">
        <div class="info-left info-flex">
          <el-col :span="10" class="space">
            <span>医生：{{ doctorName }}</span>
          </el-col>
          <el-col :span="10" class="space">
            <span>服务科室：{{ departmentName }}</span>
          </el-col>
          <el-col :span="20" class="space">
            <span>提供服务:{{ allService }}</span>
          </el-col>
        </div>
        <div class="inf-right info-flex">
          <el-col :span="10" class="countRecipt count-left count-flex">
            <el-col :span="24" class="space">
              <span>累计收入</span>
            </el-col>
            <el-col :span="10" class="space">
              <span>300元</span>

            </el-col>
            <el-col v-show="pane==='appointService' && ishow" :span="6">
              <el-button type="text" @click="serviceTable">详情</el-button>
            </el-col>
          </el-col>
          <el-col :span="10" class="countOrder count-right count-flex el-col-offset-2">
            <el-col :span="24" class="space">
              <span>累计订单</span>
            </el-col>
            <el-col :span="10" class="space">
              <span>100单</span>
            </el-col>
            <el-col v-show="pane==='appointService' && ishow" :span="6">
              <el-button type="text" @click="serviceTable">详情</el-button>
            </el-col>
          </el-col>
        </div>
      </div>
      <div v-else-if="cityid!==null" style="padding-top: 30px">
        <el-col :span="6" class="el-col-offset-1">
          <span>城市：{{ city }}</span>
        </el-col>
        <el-col :span="6" class="el-col-offset-1">
          <span>服务科室：{{ departmentName }}</span>
        </el-col>
        <el-col :span="6" class="el-col-offset-1">
          <span>服务名称：{{ serviceName }}</span>
        </el-col>
      </div>
    </div>
    <div class="ele-content">
      <el-col :span="3" class="ment-div-tab">
        <el-col
          :span="20"
          class="tab-head el-col-offset-2 "
          :class="pane==='shiftTable'?'tab-active':''"
          @click.native="showTabPane('shiftTable',clickDate)"
        >
          排班表
        </el-col>
        <el-col
          :span="20"
          class="tab-head el-col-offset-2"
          :class="pane==='appointService'?'tab-active':''"
          @click.native="showTabPane('appointService',clickDate)"
        >
          已预约服务
        </el-col>
      </el-col>
      <el-col v-show="pane==='shiftTable' && ishow" :span="16" class="tabPane el-col-offset-2">
        <div class="template-table">
          <el-calendar v-model="value">
            <template
              slot="dateCell"
              slot-scope="{date, data}"
            >

              <div @click="dateAppointService(data.day)">
                <div v-if="doctorid" style="height: 100%">
                  <el-col :span="18" class="el-col-offset-2 date-cell">{{ data.day.split('-').slice(2).join('-') }}</el-col>

                  <el-col :span="2" class="date-cell">
                    <div v-if="doctorAppointmentList&&doctorAppointmentList.length!==0" class="date-click">
                      <div v-for="(item,index) in doctorAppointmentList" :key="index">
                        <div v-if="(item.EventTime.slice(0,4)).indexOf(data.day.slice(0,4))!=-1">
                          <div v-if="(item.EventTime.split('-').slice(1)[0]).indexOf(data.day.split('-').slice(1)[0])!=-1">
                            <div v-if="(item.EventTime.split('-').slice(2).join('-').slice(0,2)).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                              <el-button v-if="item.appointmentState===1" type="success" circle />
                              <el-button v-else type="danger" circle />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-col>

                  <el-col :span="2" class="date-cell" />
                  <el-col :span="18" class="date-cell">
                    <div v-if="doctorAppointmentList&&doctorAppointmentList.length!==0" class="date-click">
                      <div v-for="(item,index) in doctorAppointmentList" :key="index">
                        <div v-if="(item.EventTime.slice(0,4)).indexOf(data.day.slice(0,4))!=-1">
                          <div v-if="(item.EventTime.split('-').slice(1)[0]).indexOf(data.day.split('-').slice(1)[0])!=-1">
                            <div v-if="(item.EventTime.split('-').slice(2).join('-').slice(0,2)).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                              <p>预约:&nbsp;&nbsp;{{ item.appointmentNum }}</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </el-col>
                </div>

              </div>

              <div v-if="cityid!==null" slot="reference" @click="dateAppointService(data.day)">
                <el-col :span="18" class="el-col-offset-2 date-cell">{{ data.day.split('-').slice(2).join('') }}</el-col>
                <div v-if="serviceCityAppointmentList&&serviceCityAppointmentList.length!==0" class="date-click">
                  <div v-for="(item,index) in serviceCityAppointmentList" :key="index">
                    <div v-if="(item.EventTime.slice(0,4)).indexOf(data.day.slice(0,4))!=-1">
                      <div v-if="(item.EventTime.split('-').slice(1)[0]).indexOf(data.day.split('-').slice(1)[0])!=-1">
                        <div v-if="(item.EventTime.split('-').slice(2).join('-').slice(0,2)).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                          <el-col :span="18" class="date-cell"><p>预约：{{ item.appointmentNum }}</p></el-col>
                          <el-col :span="18" class="date-cell"><p>医生:&nbsp;{{ item.appointmentDoctorNum }}</p></el-col>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </template>
          </el-calendar>
        </div>
      </el-col>
      <el-col v-show="pane==='appointService' && ishow" :span="16" class="tabPane el-col-offset-2">
        <div class="appointService">
          <div v-if="doctorid">
            <div class="template-head">
              <el-col :span="6">
                <span>{{ toDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum1 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable1"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="template-head">
              <el-col :span="6">
                <span>{{ nextDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum2 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable2"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div v-else-if="cityid">
            <div class="template-head">
              <el-col :span="6">
                <span>{{ clickDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum1 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable1"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="changeHandle(scope.row)"
                      >更换医生</el-button>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="template-head">
              <el-col :span="6">
                <span>{{ nextDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum2 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable2"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-dialog :visible.sync="dialogVisible" width="80%">
            <div slot="title" class="ele-dialog-title">选择医生</div>
            <el-form :model="formData">
              <div class="ele-div-keysearch">
                <div class="search-left">
                  <el-button type="primary">全部</el-button>
                  <el-select v-model="formData.address.shengId" @change="getCityListByid">
                    <el-option v-for="(item,index) in address.provinceList" :key="index" :value="index" :label="item.province.name" />
                  </el-select>
                  <el-select v-model="formData.address.shiId" @change="getCityInfoByid">
                    <el-option v-for="(item,index) in address.cityList" :key="index" :value="index" :label="item.city.name" />
                  </el-select>
                  <div class="ele-input">
                    <el-input v-model="keyWords" suffix-icon="el-icon-search" placeholder="输入名称搜索" />
                  </div>
                  <el-button type="primary">确定</el-button>
                </div>
                <div class="search-right search-flex">
                  <el-button type="primary" @click="addDoctor">添加医生</el-button>
                  <el-button type="primary" @click="refresh">刷新</el-button>
                </div>
              </div>
              <div class="extra-search">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="serviceDate"
                    type="date"
                    placeholder="选择日期"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="时间段">
                  <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
                <el-form-item label="科室">
                  <el-select v-model="department" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>

            <div class="ele-table">
              <el-table :data="doctorList" stripe>
                <el-table-column type="selection" />
                <el-table-column label="医生名称" prop="doctorName" />
                <el-table-column label="城市" prop="city" />
                <el-table-column label="医院" prop="hospital" />
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      plain
                      @click="selectOrder(scope.row)"
                    >选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--        <div class="ele-div-footer">
                        <div class="footer-left" />
                        <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
                      </div>-->
            </div>
          </el-dialog>
        </div>
      </el-col>
      <!--      <el-col v-show="pane==='appointService' && ishow" :span="16" class="tabPane el-col-offset-2">
        <div class="appointService">
          <div v-if="doctorid">
            <div class="template-head">
              <el-col :span="6">
                <span>{{ toDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum1 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable1"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="template-head">
              <el-col :span="6">
                <span>{{ nextDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum2 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable2"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div v-else-if="cityid">
            <div class="template-head">
              <el-col :span="6">
                <span>{{ clickDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum1 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable1"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="changeHandle(scope.row)"
                      >更换医生</el-button>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="template-head">
              <el-col :span="6">
                <span>{{ nextDate }}</span>
              </el-col>
              <el-col :span="3" class="el-col-offset-1">
                <span>预约人数: &nbsp;{{ appointmentNum2 }}</span>
              </el-col>
            </div>
            <div class="dataTable">
              <el-table
                :data="dataTable2"
                :header-row-style="headColor"
              >
                <el-table-column label="用户" prop="user" />
                <el-table-column label="预约服务" prop="appointService" />
                <el-table-column label="预约时间" prop="appointTime" />
                <el-table-column label="状态" prop="state" />
                <el-table-column label="操作" fixed="right" width="300">
                  <template slot-scope="scope">
                    <span>
                      <el-button
                        type="text"
                        @click="detailHandle(scope.row)"
                      >查看详情</el-button>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <el-dialog :visible.sync="dialogVisible" width="80%">
            <div slot="title" class="ele-dialog-title">选择医生</div>
            <el-form :model="formData">
              <div class="ele-div-keysearch">
                <div class="search-left">
                  <el-button type="primary">全部</el-button>
                  <el-select v-model="formData.address.shengId" @change="getCityListByid">
                    <el-option v-for="(item,index) in address.provinceList" :key="index" :value="index" :label="item.province.name" />
                  </el-select>
                  <el-select v-model="formData.address.shiId" @change="getCityInfoByid">
                    <el-option v-for="(item,index) in address.cityList" :key="index" :value="index" :label="item.city.name" />
                  </el-select>
                  <div class="ele-input">
                    <el-input v-model="keyWords" suffix-icon="el-icon-search" placeholder="输入名称搜索" />
                  </div>
                  <el-button type="primary">确定</el-button>
                </div>
                <div class="search-right search-flex">
                  <el-button type="primary" @click="addDoctor">添加医生</el-button>
                  <el-button type="primary" @click="refresh">刷新</el-button>
                </div>
              </div>
              <div class="extra-search">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="serviceDate"
                    type="date"
                    placeholder="选择日期"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="时间段">
                  <el-date-picker
                    v-model="timeRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
                <el-form-item label="科室">
                  <el-select v-model="department" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-form>

            <div class="ele-table">
              <el-table :data="doctorList" stripe>
                <el-table-column type="selection" />
                <el-table-column label="医生名称" prop="doctorName" />
                <el-table-column label="城市" prop="city" />
                <el-table-column label="医院" prop="hospital" />
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      plain
                      @click="selectOrder(scope.row)"
                    >选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              &lt;!&ndash;        <div class="ele-div-footer">
                        <div class="footer-left" />
                        <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
                      </div>&ndash;&gt;
            </div>
          </el-dialog>
        </div>
      </el-col>-->
    </div>
  </div>
</template>

<script>
import { appointmentServiceCity, doctorList, shiftTableByCityId } from '@/api/service'
import { address, getCityInfoByid, getCityListByid } from '@/utils/address'
export default {
  name: 'CountService',
  data() {
    return {
      headColor: { background: '#f3f3f3' },
      doctorid: null,
      doctorName: '',
      departmentId: '',
      departmentName: '',
      allService: '',

      provinceid: null,
      province: '',
      cityid: null,
      city: '',
      serviceid: null,
      serviceName: '',

      pane: 'shiftTable',
      ishow: true,

      // shiftTable
      value: new Date(),
      doctorAppointmentList: [],
      serviceCityAppointmentList: [],

      // appointmentService
      clickDate: new Date().toLocaleDateString().split('/').slice(0, 3).join('-'),
      dialogVisible: false,
      address,
      nextDate: '',
      selectOrderid: null,
      appointmentNum1: null,
      appointmentNum2: null,
      dataTable1: [],
      dataTable2: [],
      formData: {
        address: {
          shengId: null,
          shiId: null,
          quId: null,
          addressDetail: null
        }
      },
      keyWords: '',
      doctorList: [],
      timeRange: [],
      department: '',
      options: [],
      toDate: '',
      serviceDate: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.query.cityid) {
        this.cityid = this.$route.query.cityid
        this.city = this.$route.query.city
        this.departmentName = this.$route.query.departmentName
        this.departmentId = this.$route.query.departmentId
        this.serviceName = this.$route.query.serviceName
        this.serviceid = this.$route.query.serviceid
      } else {
        console.log(this.$route.params)
        this.doctorid = this.$route.params.id
        this.doctorName = this.$route.params.userName
        this.departmentName = this.$route.params.departmentName
        this.departmentId = this.$route.params.departmentId
        this.$route.params.serviceCityListSaveDtos.forEach(item => {
          if (this.allService) {
            this.allService = this.allService + '、' + item.serviceName
          } else {
            this.allService = item.serviceName
          }
        })
      }
      this.$nextTick(() => {
        // 点击前一个月
        const prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn.addEventListener('click', e => {
          if (this.doctorid !== null) {
            // this.doctorAppointmentList=getList(this.value.toLocaleDateString().split('/').slice(0,2).join('-'))
          } else if (this.cityid != null) {
            // this.serviceCityAppointmentList=getList(this.value.toLocaleDateString().split('/').slice(0,2).join('-'))
          }
        })

        // 点击下一个月
        const nextBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        nextBtn.addEventListener('click', () => {
          if (this.doctorid !== null) {
            // this.doctorAppointmentList=getList(this.value.toLocaleDateString().split('/').slice(0,2).join('-'))
          } else if (this.cityid != null) {
            // this.serviceCityAppointmentList=getList(this.value.toLocaleDateString().split('/').slice(0,2).join('-'))
          }
        })
      })
      const month = this.value.toLocaleDateString().split('/').slice(0, 2).join('-')
      this.getMonthList(month)

      const today = new Date(Date.parse(this.clickDate.replace(/-/g, '/')))
      const nextDay = new Date(today.getTime() + 24 * 60 * 60 * 1000)
      this.nextDate = nextDay.toLocaleDateString().split('/').slice(0, 3).join('-')
      if (this.cityid) {
        const data = {
          cityId: this.cityid,
          date: this.clickDate,
          nextDate: this.nextDate
        }
        appointmentServiceCity(data).then(response => {
          this.dataTable1 = response.data.data
          this.appointmentNum1 = response.data.total
        })
      } else {
        const data = {
          doctorId: this.cityid,
          date: this.clickDate,
          nextDate: this.nextDate
        }
        appointmentServiceCity(data).then(response => {
          this.dataTable1 = response.data.data
          this.appointmentNum1 = response.data.total
        })
      }
    },
    /** 获取日历列表*/
    getMonthList(month) {
      if (this.cityid) {
        const data = {
          cityId: this.cityid,
          month: month
        }
        console.log(data)
        shiftTableByCityId(data).then(response => {
          this.serviceCityAppointmentList = response.data.data
        })
      }
      if (this.doctorid) {
        const data = {
          doctorId: this.doctorid,
          month: month
        }
        shiftTableByCityId(data).then(response => {
          this.doctorAppointmentList = response.data.data
        })
      }
    },
    /** 获取点击日期的预约服务表 */
    dateAppointService(data) {
      this.clickDate = data
      console.log(data)
      this.showTabPane('appointService', this.clickDate)
      /* this.$emit("showTabPane",'appointService',data)*/
    },
    /** 医生统计订单表*/
    serviceTable() {
      this.$router.push({ name: 'serviceTable', query: { doctorid: this.doctorid }})
    },
    // 查看详情
    detailHandle(row) {
      this.$router.push({ name: 'OnlineDetail', query: row })
    },
    // 变更医生
    changeHandle(row) {
      this.dialogVisible = true
      this.selectOrderid = row.id
      this.department = row.departmentid
      const dateRange = []
      if (this.timeRange && this.timeRange.length > 0) {
        this.timeRange.forEach(item => {
          const time = item.toLocaleDateString().split('/').slice(0, 3).join('-')
          dateRange.push(time)
        })
      }
      const data = {
        shengId: address.shengId,
        sheng: address.sheng,
        shiId: address.shiId,
        shi: address.shi,
        keywords: this.keyWords,
        date: this.toDate,
        timeRange: dateRange,
        department: this.department
      }
      this.getDoctorList(data)
    },
    getCityListByid, getCityInfoByid,
    getDoctorList(data) {
      doctorList(data).then(response => {
        this.doctorList = response.data.data
      })
    },
    addDoctor() {
      this.$router.push({ name: 'addDoctor' })
    },

    showTabPane(val, data) {
      if (this.pane === val && val === 'shiftTable') {
        this.pane = val
        console.log(val)
        this.isShow = true
      } else {
        this.pane = val
        console.log(val)
        this.isShow = true
      }
    },
    handleRomeve(file) {
      console.log(file)
    },
    refresh() {

    }
  }
}
</script>

<style lang="scss" scoped>
  .CountService {
    padding: 0px 100px;

    .ele-title {
      margin-top: 40px;
      padding-left: 20px;
    }

    .ele-con-res {
      background: #f3f3f3;
      border-radius: 5px;
      margin-top: 40px;
      justify-content: space-between;
      height: 130px;
      align-items: center;

      .space {
        margin: 10px;
      }

      .count-flex {
        height: 80px;
        background: #FFFFFF;
      }
    }

    .ele-content {
      padding: 25px 0px;

      .ment-div-tab {
        border: solid 2px #F3F3F3;
        height: 500px;

        .tab-active {
          background: #F3F3F3;
        }
        .tab-head {
          text-align: center;
          height: 50px;
          line-height: 50px;
          margin-top: 20px;
        }

      }

      .tabPane{
        height: 500px;
      }

      ::v-deep.el-form-item--medium {
        margin-top: 20px;
      }

      ::v-deep.el-form-item__label {
        width: 100px;
        text-align: start;
      }

      .ele-proportion,
      .ele-pre {
        margin-left: 100px;
      }

      .ele-pre {
        line-height: 30px;
        font-size: 14px;
        color: gray;
        width: 520px;
      }

      .title-txt {
        font-size: 14px;
        color: gray;
        white-space: nowrap;
        margin: 0;
        padding: 0;
      }

      .service-head {
        background: #f3f3f3;
      }

      .timeModelBox {
        margin-top: 50px;

        .line {
          margin-left: 38px;
          height: 36px;
          line-height: 36px;
          text-align: center;
        }
      }
    }
    .template-head{
      margin: 20px 0px;
      height: 50px;
      span{
        font-size: 18px;
        font-weight: bold;
      }
    }
    .dataTable{
      margin-bottom: 90px;
      ::v-deep.el-table th{
        background: #F3F3F3;
      }
    }
  }

  .headColor {
    background: #F3F3F3;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .marginleft {
    margin-left: 12px;
  }

  .text {
    text-align: end;
    padding-right: 10px;
  }
</style>
